<template>
	<view class="login_page full">
		<LoginContent title="用户注册" describe="USER REGISTRATION">
			<template #content>
				<el-form
					label-width="0px"
					:model="form"
					:rules="rules"
					class="login_form"
					ref="registerRef"
				>
					<el-form-item prop="phone">
						<el-input
							v-model="form.phone"
							placeholder="请输入手机号码"
							:prefix-icon="Iphone"
							size="large"
						/>
					</el-form-item>
					<el-form-item prop="validCode">
						<el-input
							v-model="form.validCode"
							placeholder="请输入短信验证码"
							:prefix-icon="ChatDotSquare"
							size="large"
						>
							<template #append>
								<Captcha
									v-model:phone="form.phone"
									@getCode="getCode"
									type="register"
								/>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input
							v-model="form.password"
							placeholder="请设置6-20位登录密码"
							show-password
							:prefix-icon="Lock"
							size="large"
						/>
					</el-form-item>
					<el-form-item prop="rePassword">
						<el-input
							v-model="form.rePassword"
							placeholder="请再次输入新的登录密码"
							show-password
							:prefix-icon="Lock"
							size="large"
						/>
					</el-form-item>
					<el-form-item>
						<el-checkbox v-model="agreeValue" label="true" size="large">
							<text class="greyColor">
								勾选同意
								<el-link type="primary">《用户服务协议》</el-link>
							</text>
						</el-checkbox>
					</el-form-item>
					<el-button
						type="primary"
						class="w-full"
						size="large"
						:loading="registerLoading"
						@click="register(registerRef)"
					>
						立即注册
					</el-button>
				</el-form>
				<el-link
					type="primary"
					class="w-full"
					:underline="false"
					@click="goLogin"
				>
					已有账户 立即登录
				</el-link>
			</template>
		</LoginContent>
	</view>
</template>
<script setup>
import LoginContent from "./components/content.vue";
import Captcha from "@/components/captcha";
import {
	validateMobile,
	validatePassword,
	validateNewPassword,
} from "@/utils/rules";
import { Iphone, Lock, ChatDotSquare } from "@element-plus/icons-vue";
import { signUpByPhonApi } from "@/api";
const registerLoading = ref(false);
// 表单
const form = ref({
	phone: "",
	validCode: "",
	password: "",
	rePassword: "",
	validCodeReqNo: "",
});
const registerRef = ref(null);
// 校验规则
const rules = {
	phone: [{ validator: validateMobile, trigger: "blur" }],
	password: [{ validator: validatePassword, trigger: "blur" }],
	validCode: [{ required: true, message: "请输入短信验证码", trigger: "blur" }],
	rePassword: [
		{
			validator: (rule, value, callback) =>
				validateNewPassword(rule, value, callback, form.value.password),
			trigger: "blur",
		},
	],
};
// 同意协议
const agreeValue = ref(false);

// 跳转登录
const goLogin = () => {
	uni.navigateTo({
		url: "/pages/login/index",
	});
};

// 获取短信吗
const getCode = (res) => {
	form.value.validCodeReqNo = res;
};

// 注册
const register = async (formEl) => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			if (!agreeValue.value) {
				return feedback.toast("请勾选同意《用户服务协议》");
			}
			try {
				registerLoading.value = true;
				const res = await signUpByPhonApi(form.value);
				if (res.code != 200) {
					return feedback.toast(res.msg);
				}
				goLogin();
			} catch (error) {
			} finally {
				registerLoading.value = false;
			}
		}
	});
};
</script>
<style lang="scss" scoped>
.login_ {
	&page {
		background-color: $uni-bg-color;
	}
	&form {
		width: 80%;
		margin: 50rpx auto;
	}
}
</style>
